$prefix: ns;

// Color
$--x-primary-active: var(--x-primary-a100);
$--x-primary: var(--x-primary);
$--x-primary-hover: var(--x-primary-400);
$--x-text: var(--x-text);
$--x-text-300: var(--x-text-300);
$--x-text-500: var(--x-text-500);
$--x-primary-text: var(--x-primary-900);
$--x-text-disabled: var(--x-text-500);
$--x-border: var(--x-border);
$--x-background: var(--x-background);
$--x-background-100: var(--x-background-100);
$--x-background-a100: var(--x-background-a100);
$--x-background-200: var(--x-background-200);
$--x-background-500: var(--x-background-500);
$--x-box-shadow: var(--x-box-shadow) var(--x-box-shadow-base-color);
$--x-box-shadow-light: var(--x-box-shadow) var(--x-box-shadow-light-color);

// ----  1rem = 16px  -----
// |  px  |     rem       |
// ------------------------
// |  2   | 2/16 = .125   |
// |  4   | 4/16 = .25    |
// |  6   | 6/16 = .375   |
// |  8   | 8/16 = .5     |
// |  10  | 10/16 = .625  |
// |  12  | 12/16 = .75   |
// |  14  | 14/16 = .875  |
// |  16  | 16/16 = 1     |
// |  18  | 18/16 = 1.125 |
// |  20  | 20/16 = 1.25  |
// |  24  | 24/16 = 1.5   |
// |  30  | 30/16 = 1.875 |
// |  36  | 36/16 = 2.25  |
// |  42  | 42/16 = 2.625 |
// |  48  | 48/16 = 3     |

$header-height: 3.25rem;
$sider-width: 16.25rem;
$box-shadow: 0 0.125rem 0.25rem 0 rgba(197, 197, 197, 0.3);
$transition-duration: 0.3s;
$transition-duration-slow: 0.5s;
$border-color: rgba(0, 0, 0, 0.08);
$slider-bg-color: #f0f0f0;

$docs-box-shadow: 0 0 0.375rem rgba(197, 197, 197, 0.7);
$docs-component-border-color: lighten(black, 95%);
$docs-component-divider-border-color: lighten(black, 90%);
$docs-code-background-color: lighten(black, 97%);
$docs-span-red: #c7254e;
